@charset "utf-8";
/*@import "reset";*/
@import "utils"; 
/*@import "common";*/ 
.shoppingCartWeb{
    @include web;
    //头部引入 
    section{
        @include midContent; 
//      padding: r(37) 0 r(100);
        .loginHint{
//          height: r(105);
            padding: r(10);
            line-height: r(105); 
            background: #fafafa; 
            text-align: center;
            font-size: r(24+8);
            color: #7b7b7b;
            letter-spacing: r(2);
            p{
                font-size: r(24+8);
                line-height: 1.5;
                text-align: left;
            }
            span{
                font-size: r(24+8);
                color: #c76e50;
                padding: 0 r(4) r(6);
                border-bottom: 1px solid #f19272;
                a{
                    font-size: r(24+8);
                }
            }
        }
        
        .shoppingList{
            overflow: hidden;
            margin-top: r(55);
            ul{
                width: r(710);
                margin: 0 auto r(160);
                border-bottom: 1px dashed  #e39d88;
                li{
//                  transition: all .2s ease;
                    width: 100%;
                    height: r(234);
                    margin-bottom: r(42);
                    background: #f6f6f6;
                    font-size: r(20+8);
                    color: #535353;
                    position: relative;
                    >div{
                        display: inline-block;
                    }
                    .sel{
                        width: r(32);
                        height: r(32);
                        text-align: center;
                        line-height: r(32);
                        background: #c6c6c6;
                        vertical-align: top;
                        overflow: hidden;
                        margin: r(75) r(27) 0 r(16);
                        span{
                            display: inline-block;
                            width: r(20);
                            height: r(20);
                            img{
                                display: inline-block;
                                width: 100%;
                            }
                        }
                    }
                    .pic{
                        width: r(183);
                        height: r(183);
                        @include aImg;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .intro{
                        width: r(310);
                        height: r(183);
                        @include middle;
                        margin-left: r(24);
                        p{
                            font-size: r(20+8);
                            margin-top: r(5);
//                          line-height: r(40);
                            letter-spacing: r(2);
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                        }
                        .count{
                            position: absolute;
                            bottom:0;
                            font-size: 0;
                            border: 1px solid #b9b9b9;
                            
                            >div{
                                color: #646464;
                                font-size: r(28+8);
                                display: inline-block;
                                width: r(55);
                                height: r(48);
                                text-align: center;
                                line-height: r(48);
                            }
                            .num{
                                border-left: 1px solid #b9b9b9;
                                border-right: 1px solid #b9b9b9;
                            }
                        }
                    }
                    .price{
                        position: absolute;
                        right: r(20);
                        bottom: r(30);
                        p,span{
                            font-size: r(18+8);
                        }
                    }
                    .del{
                        width:r(96);
                        height: r(234);
                        text-align: center;
                        background: #f8bdab;
                        color: white;
                        display: none;
                        position: absolute;
                        top: 0;
                        left: 100%;
                        .content{
                            display: inline-block;
                            text-align: center;
                            img{
                                width: r(30);
                                height: r(30);
                            }
                            position:relative;
                            top:50%;
                            transform: translateY(-50%);
                        }
                    }
                }
            }
            
            
        }
    }
    .account{
                width: 100%;
                padding: r(30) r(32) r(30) r(25);
                box-sizing: border-box;
                position: absolute;
                bottom: r(120);
                z-index: 999;
                font-size: r(24+8);
                background: white;
                p,span{
                   font-size: r(18+8); 
                }
                .left{
                    width: r(160);
                    display: inline-block;
                    .circle{
                        width: r(30);
                        height: r(30);
                        text-align: center;
                        line-height: r(30);
                        overflow: hidden;
                        border-radius: 50%;
                        border: 1px solid #FCB9A2;
                        margin-right: r(23);
                        display: inline-block;
                        vertical-align: middle;
                        img{
                            display: inline-block;
                            width: 50%;
                            vertical-align: middle;
                        }
                       
                    }
                    .circle+span{
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                
                .right{
                    width: r(510);
                    display: inline-block;
                    text-align: right;
                    p{
                        display: inline-block;
                        margin-right: r(45);
                    }
                    button{
                        outline: none;
                        width: r(145);
                        height: r(52);
                        line-height: r(52);
                        text-align: center;
                        color: white;
                        font-size: r(20+8);
                        background: #e39d88;
                    }
                }
            }
    //尾部引入
}
   